<template>
  <div>
    <!-- <div v-show="dragenter" class="menu-placeholder"
      @dragenter="handleDragEnter($event, '')" @dragover="handleDragOver($event, {})"
      :class="{'menu-placeholder-higlight': dragenter}"></div> -->
    <div @click="toggle" v-if='inited' :class="{visiting1: visiting1, dragover: dragover}"
         :style="paddingLeft" :id="model._id"
         @dragleave="handleDragLeave" @dragend="handleDragEnd" @dragstart.stop="handleDragStart($event, model)"
         @dragenter="handleDragEnter($event, model._id)" @dragover="handleDragOver($event, model)"
         @drop="handleDrop($event)" :draggable="drag">
      <!-- 点击折叠展开 -->
      <router-link :to="{ path: '/km/article', query: { id: model._id, sid: model.kmSpaceId }}">
        <div class="row" :class="{'menu-visiting': visiting}">
          <!-- 显示内容 -->
          <q-avatar v-if="isFolder" class="q-pa-none q-ma-none" :class="rotate ? 'rotate' : ''" icon="play_arrow"
                    size="md"/>
          <q-avatar v-else class="q-pa-none q-ma-none" icon="" size="md"/>
          <div class="ellipsis col menu-title" :style="titleStyle">
            {{ $store.state.userInfo.role === 0 ? model.seq + '》' : '' }}
            <span class="material-icons">{{ model.contentForm === 2 ? 'link' : 'feed' }}</span>
            {{ model.title }}
          </div>
          <!-- 显示折叠展开的图标，如果没有下级目录的话，则不显示 -->
        </div>
        <!-- 控制是否显示下级目录 -->
      </router-link>
    </div>
    <!-- 重点代码，调用自身，实现递归，绑定数据 -->
    <Item :drag="drag" :inited='initChildredn' :filtingShow="filtingShow" v-show="show" v-for="model in model.children"
          :model="model" :key="model._id"></Item>
  </div>
</template>
<script>
import iContent from 'src/api/content'

export default {
  name: 'Item',
  // 如果想使用此组件，则需要传递的数据
  props: {
    model: {
      type: Object,
      required: true
    },
    drag: {
      type: Boolean,
      default: false
    },
    inited: {
      type: Boolean,
      default: true
    },
    filtingShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 默认不显示下级目录
      selected: false,
      dragover: false,
      dragenter: false,
      paddingLeft: '',
      initChildredn: true, // 前期菜单少时，默认都加载；后期改为不加载，上级被点击后才加载
      timeUp: {},
      rotate: false,
      show: false
      // dragging: null, // 用this.movingItem会导致null
      // movingItem: null // 用this.movingItem会导致null
    }
  },
  computed: {
    // 控制是否有下级目录和显示下级目录
    isFolder () {
      return this.model.children && this.model.children.length
    },
    visiting () {
      return this.$route.query.id === this.model._id
    },
    visiting1 () {
      return this.$route.query.id === this.model._id
    },
    titleStyle () {
      return `${'width:' + (300 - (this.model.level - 1 + (this.isFolder ? 2 : 0)) * 16) + 'px;'}`
    }
  },
  watch: {
    model () {
      if (this.filtingShow) {
        this.show = true
        // console.log('this.show = true')
      } else {
        this.show = false
        // console.log('this.show = false')
      }
    }
  },
  mounted () {
    // this.isFolder = this.model.children && this.model.children.length
    this.paddingLeft = `${'padding-left:' + (this.model.level - 1) * 16 + 'px;'}`
  },
  methods: {
    handleDragStart (e) {
      e.dataTransfer.setData('text/plain', e.target.id)
    },
    handleDragEnter (e, id) {
      // 开始计时，
      this.timeUp[id] = Date.now()
      this.dragenter = true
    },
    handleDragOver (e, model) {
      // console.log(e, model)
      // 阻止元素的默认行为，不然ondrop不管用
      e.preventDefault()
      // e.stopImmediatePropagation()
      // console.log('model', model)
      // 在当前over的元素上高亮边框
      // setTimeout(function () { console.log('sleep 2 secs') }, 2000)
      this.dragover = true
      console.log(this)
      console.log(Date.now() - this.timeUp[model._id] > 500)
      if (model.children && model.children.length && Date.now() - this.timeUp[model._id] > 1000) {
        this.show = true
      }
    },
    handleDragLeave () {
      this.dragover = false
      // this.dragenter = false
    },
    handleDrop (e) {
      // e.preventDefault()
      this.dragover = false
      const movingItem = e.dataTransfer.getData('text/plain')
      console.log('this.movingItem', movingItem)
      console.log('drop e', e)
      console.log('drop this', this)
      const toId = e.target.parentNode.parentNode.parentNode.id
      if (movingItem === toId) return
      this.$emit('drag', movingItem, toId)
      console.log('toId', toId)

      const content = {
        _id: movingItem,
        parentId: toId
      }
      iContent.update(content)
      // this.$store.dispatch('km/initMenu', { kmSpaceId: this.$route.query.sid })
      console.log('content', content)
      this.toggle()
    },
    handleDragEnd (e) {
      this.dragover = false
      // Clear the drag data cache (for all formats/types)
      e.dataTransfer.clearData()
    },
    // 点击折叠展开的方法
    toggle () {
      this.rotate = !this.rotate
      if (this.isFolder) {
        // 若没有初始化子菜单，则初始化
        this.initChildredn = true
        // 不是筛选菜单模式时，子菜单显示与隐藏点击切换
        if (!this.filtingShow) this.show = !this.show
      }
    }
  }
}
</script>

<style lang="scss" scopped>
.menu-title {
  margin: 6px 0;
  height: 20px;
  line-height: 20px;
  flex: 1;
}

// a:link, a:visited {
//   color: $nonce;
//   text-decoration: none;
// }
// a:hover, a:active {
//   font-weight: bolder;
//   background-color: rgba($color: $c3, $alpha: 0.2);
// }
.visiting1 {
  background-color: rgba($color: $c3, $alpha: 0.2);
}

.menu-visiting {
  font-weight: bolder;
  color: $c1;
}

.dragover {
  border: $c5 1px solid;
}

.rotate {
  transform: rotate(90deg);
}

.menu-placeholder {
  height: 32px;
  background-color: $c3;
}
</style>
